<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>华容道布局</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
	</head>

	<body>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>

		<style>
			* {
				padding: 0;
				margin: 0;
				background-color: black;
				color: aliceblue;
			}

			canvas {
				background-color: black;
				width: 100vw;
				height: 125vw;

				/* border: 5px solid antiquewhite; */
			}
		</style>
		<div class="mui-content">
			<canvas width="400" height="500"></canvas>
			<div>
				<div class="mui-input-row mui-radio">
					<label>大格</label>
					<input name="radio" type="radio" checked>
				</div>
				<div class="mui-input-row mui-radio">
					<label>横格</label>
					<input name="radio" type="radio">
				</div>
				<div class="mui-input-row mui-radio">
					<label>竖格</label>
					<input name="radio" type="radio">
				</div>
				<div class="mui-input-row mui-radio">
					<label>小格</label>
					<input name="radio" type="radio">
				</div>
				<button type="button" class="mui-btn mui-btn-red mui-btn-block">完成</button>
				<button type="button" class="mui-btn mui-btn-red mui-btn-block">清空</button>
			</div>
		</div>
	</body>

</html>

<script>
	"use strict";

	let block_type = ["S", "H", "V", "B", "K"];
	let block_color = {
		S: "Orange",
		H: "Green",
		V: "Blue",
		B: "Firebrick",
		K: "Black"
	};
	let block_number = {
		S: 1,
		H: 2,
		V: 3,
		B: 4,
		K: 0
	};

	let blocks = [];
	let cookies = document.cookie.split(";");
	cookies.forEach((cookie, _) => {
		if (cookie.trim().startsWith("blocks=")) {
			blocks = JSON.parse(cookie.split("=")[1]);
		}
	});

	let canvas = document.querySelector("canvas");
	draw(canvas, blocks);

	function clear(canvas) {
		let context = canvas.getContext("2d");
		context.beginPath();
		context.fillStyle = "black";
		context.fillRect(0, 0, canvas.width, canvas.height);
		context.closePath();

		for (let i = 1; i < 5; i++) {
			context.beginPath();
			context.strokeStyle = "white";
			context.lineWidth = 1;
			context.moveTo(0, i * 100);
			context.lineTo(400, i * 100);
			context.stroke();
			context.closePath();
		}
		for (let j = 1; j < 4; j++) {
			context.beginPath();
			context.strokeStyle = "white";
			context.lineWidth = 1;
			context.moveTo(j * 100, 0);
			context.lineTo(j * 100, 500);
			context.stroke();
			context.closePath();
		}
	}

	function draw(canvas, bs) {
		clear(canvas);
		let context = canvas.getContext("2d");
		bs.forEach((b, _) => {
			context.beginPath();
			context.fillStyle = block_color[b.bt];
			context.fillRect(b.y * 100, b.x * 100, b.w * 100, b.h * 100);
			context.closePath();

			context.beginPath();
			context.strokeStyle = "black";
			context.lineWidth = 1;
			context.rect(b.y * 100, b.x * 100, b.w * 100, b.h * 100);
			context.stroke();
			context.closePath();
		});
	}

	canvas.onclick = (e) => {
		var style = window.getComputedStyle(canvas, null);
		var cssWidth = parseFloat(style["width"]);
		var cssHeight = parseFloat(style["height"]);
		var scaleX = canvas.width / cssWidth; // 水平方向的缩放因子
		var scaleY = canvas.height / cssHeight; // 垂直方向的缩放因子
		var x = e.clientX;
		var y = e.clientY;
		x *= scaleX; // 修正水平方向的坐标
		y *= scaleY; // 修正垂直方向的坐标
		x /= 100;
		y /= 100;
		x = Math.floor(x);
		y = Math.floor(y);


		let bt = null;
		let w = 0;
		let h = 0;
		mui("input").each((idx, item) => {
			if (item.checked) {
				switch (item.previousSibling.previousElementSibling.innerText[0]) {
					case "大":
						bt = "B";
						w = 2;
						h = 2;
						break;
					case "小":
						bt = "S";
						w = 1;
						h = 1;
						break;
					case "横":
						bt = "H";
						w = 2;
						h = 1;
						break;
					case "竖":
						bt = "V";
						w = 1;
						h = 2;
						break;
				}
			}
		});
		let block = {
			bt: bt,
			x: y,
			y: x,
			w: w,
			h: h
		};
		let count = {
			B: 0,
			S: 0,
			H: 0,
			V: 0
		};
		blocks.forEach((b, _) => {
			count[b.bt]++;
		});
		count[block.bt]++;
		if (count["B"] > 1) {
			mui.alert("大格最多仅允许有一个");
			return;
		}
		let arr = bsToArray(blocks);
		for (let i = block.x; i < block.x + block.h; i++) {
			for (let j = block.y; j < block.y + block.w; j++) {
				if (i >= 5 || j >= 4) {
					mui.alert("板块放置不合理");
					return;
				} else if (arr[i][j] != 0) {
					mui.alert("板块放置将导致重叠");
					return;
				}
			}
		}
		blocks.push(block);
		draw(canvas, blocks);
	};

	function bsToArray(bs) {
		let arr = [];
		for (let i = 0; i < 5; i++) {
			arr.push([]);
			for (let j = 0; j < 4; j++) {
				arr[i].push(0);
			}
		}
		bs.forEach((b, _) => {
			for (let i = b.x; i < b.x + b.h; i++) {
				for (let j = b.y; j < b.y + b.w; j++) {
					arr[i][j] = block_number[b.bt];
				}
			}
		});
		return arr;
	}

	function empty() {
		blocks = [];
		draw(canvas, blocks);
	}

	function success() {
		if (blocks.length != 10) {
			mui.alert("板块总和需要是10个");
			return;
		}
		let count = {
			B: 0,
			S: 0,
			H: 0,
			V: 0
		};
		blocks.forEach((b, _) => {
			count[b.bt]++;
		});
		if (count["B"] != 1) {
			mui.alert("大格数量需要是1个");
			return;
		} else if (count["H"] + count["V"] != 5) {
			mui.alert("横格+竖格总和需要是5个");
			return;
		} else if (count["S"] != 4) {
			mui.alert("小格数量需要是4个");
			return;
		}
		let json = JSON.stringify(blocks);
		document.cookie = `blocks=${json};expires=max`;
		window.location.href = "index.html";
	}

	mui("button").each((idx, item) => {
		console.log(item);
		item.onclick = (e) => {
			switch (item.innerHTML) {
				case "完成":
					success();
					break;
				case "清空":
					empty();
					break;
			}
		};
	});
</script>